<script lang="ts">
    import { Button } from "../Button";
    import Icon from "../Common/Icons/Icon.svelte";
    import { Progress } from "../Progress";
    import { Link, Text } from "../Typography";

    const props = $props();

    const formatSize = (size: number) => {
        if (size < 1024) {
            return size + "B";
        }
        if (size < 1024 * 1024) {
            return Math.round((size / 1024) * 10) / 10 + "KB";
        }
        if (size < 1024 * 1024 * 1024) {
            return Math.round((size / 1024 / 1024) * 10) / 10 + "MB";
        }
        if (size < 1024 * 1024 * 1024 * 1024) {
            return Math.round((size / 1024 / 1024 / 1024) * 10) / 10 + "GB";
        }
    };
</script>

{#if props.store.fileList?.length}
    <ul class="cm-upload-list">
        {#if props.showClear && props.store.fileList && props.store.fileList.length && (!props.maxCount || (props.maxCount && props.maxCount > 1))}
            <div class="cm-upload-list-title">
                <Text type="secondary">已上传文件</Text>
                <Text type="primary" class="cm-upload-clear" onclick={props.onClear}>清空</Text>
            </div>
        {/if}
        <div class="cm-upload-files">
            {#each props.store.fileList as file (file.uid)}
                <li class="cm-upload-file-card">
                    <div class="cm-upload-file-preview">
                        {#if file.url}
                            <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
                            <!-- svelte-ignore a11y_click_events_have_key_events -->
                            <img
                                class="cm-upload-file-preview-img"
                                src={file.url}
                                alt=""
                                onclick={() => {
                                    props.onPreview?.(file);
                                }}
                            />
                        {:else}
                            <Icon icon="doc" size={32} />
                        {/if}
                    </div>
                    <div class="cm-upload-file-card-body">
                        <div class="cm-upload-file-card-info">
                            <span class="cm-upload-file-card-info-name" title={file.name}>
                                {file.name}
                            </span>
                            <span>{formatSize(file.size)}</span>
                        </div>
                        {#if file.showProgress && file.percentage !== 100}
                            <Progress strokeWidth={4} value={file.percentage} hidePercent />
                        {/if}
                        {#if file.status === "fail"}
                            <div class="cm-upload-error">
                                <Icon icon="alertCircle" size={12} />
                                <Text type="error" size="small" class="cm-upload-error-text">上传失败</Text>
                                {#if props.showRetry}
                                    <Link
                                        type="primary"
                                        class="cm-upload-retry"
                                        size="small"
                                        onclick={() => {
                                            props.onRetry?.(file);
                                        }}
                                    >
                                        重试
                                    </Link>
                                {/if}
                            </div>
                        {/if}
                    </div>
                    <div class="cm-upload-file-control">
                        {#if props.renderFileOperation}
                            {@render props.renderFileOperation(file, {
                                remove: () => {
                                    props.onRemove?.(file);
                                },
                            })}
                        {:else}
                            <Button
                                size="small"
                                theme="borderless"
                                onclick={() => {
                                    props.onRemove?.(file);
                                }}
                            >
                                {#snippet icon()}
                                    <Icon icon="times" />
                                {/snippet}
                            </Button>
                        {/if}
                    </div>
                </li>
            {/each}
        </div>
    </ul>
{/if}
